<template>
  <div class="Upgrade">

    <div class="demo-block">
      <div style="font-weight: bold;">接口模拟</div>
      <div id="table">
        <el-button @click="handleCreate()" type="primary" size="small" style="margin-top: 10px">新增</el-button>
        <el-table
            :data="tableData"
            border
            style="width: 100%;margin-top: 10px">
          <el-table-column
            label="编号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="region"
            label="接口类型"
            width="165">
            <template slot-scope="scope">
              <el-select disabled  placeholder="请选择接口类型" :value="scope.row.region" >
                  <el-option v-for="item in regionList" :label="item.label" :key="item.value" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
                  prop="tag"
                  label="标签"
                  width="170">
            <template slot-scope="scope">
              <el-tag type="success" disable-transitions>{{scope.row.tag}}</el-tag>
            </template>
          </el-table-column>
            <el-table-column
                    prop="url"
                    label="地址">
            </el-table-column>
          <el-table-column
                  label="开关"
                  width="60">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.state" active-color="#13ce66" inactive-color="#ff4949"
                         :active-value="1" :inactive-value="0" @change="handleActive(scope.row)"          >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
            <template slot-scope="scope">
              <el-button @click="handleUpdate(scope.row)" size="small" type="primary" icon="el-icon-edit" circle></el-button>
              <el-button @click="handleDelete(scope.row)" size="small" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog title="新增" :visible.sync="dialogFormVisible" >
          <div class="demo-block">
          <el-form :model="addForm" ref="addForm" label-position="left" label-width="80px" :rules="rules">
            <el-form-item label="接口类型" prop="region">
              <el-select v-model="addForm.region" placeholder="请选择接口类型" value="" >
                  <el-option v-for="item in regionList" :label="item.label" :key="item.value" :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签" prop="tag">
              <el-input v-model="addForm.tag" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="返回内容" prop="content">
              <el-input v-model="addForm.content" type="textarea"
                        :autosize="{ minRows: 3}" ></el-input>
            </el-form-item>
          </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
          </div>
        </el-dialog>

      </div>

    </div>
  </div>
</template>

<script>
export default {
    name: 'Upgrade',
    data() {
        return {
            dialogFormVisible: false,
            addForm:{
                id : '',
                url : '',
                tag : '',
                region:'',
                state: 0,
                content:''
            },

            tableData: [],
            regionList: [
                {
                    label:'频道列表',
                    value: 'chn-list',
                },
                {
                    label:'EPG详情',
                    value: 'metas-info',
                },
                {
                    label:'人物详情',
                    value: 'people',
                },
                {
                    label:'全量ID列表',
                    value: 'snapshot'
                },
                {
                    label:'增量ID列表',
                    value: 'change'
                },
                {
                    label:'人物全量ID列表',
                    value: 'people-snapshot',
                },
                {
                    label:'人物增量ID列表',
                    value: 'people-change',
                }],
            rules: {
                tag: [
                    { required: true, message: '请输入标签名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                region: [{ required: true, message: '请选择接口类型', trigger: 'blur'}],
                content: [{ required: true, message: '请输入内容', trigger: 'blur'}],
            }

        }
    },
    methods: {
        init(){
            this.axios.post('/iqy/virtual').then((response) => {
                console.log(response.data);
                let virtual = response.data;
                this.tableData = virtual;
            }).catch((error) => {
                console.log(error);
                this.$notify.error({
                    title: '错误',
                    message:  error,
                    duration: 0
                });
            });
        },
        parseResult(result){
            if(result.resultCode === 0){
                this.$message({
                    message: '操作成功',
                    type: 'success'
                });
            }else{
                this.$message({
                    message: result.resultMsg,
                    type: 'error'
                });
            }
        }
        ,handleActive(row){
            let params = new URLSearchParams();
            params.append('id', row.id);
            params.append('region', row.region);
            console.log(row.state);
            params.append('state', row.state);
            this.axios.post('/iqy/virtual/active',params,).then((response) => {
                console.log(response);
                let result = response.data;
                this.parseResult(result);
                this.init();
                this.$message({
                    message: '操作成功',
                    type: 'success'
                });
            }).catch((error) => {
                console.log(error);
                this.$notify.error({
                    title: '错误',
                    message:  error,
                    duration: 0
                });
            });
        }
        ,handleCreate(){
            this.addForm.id = '';
            this.addForm.url = '';
            this.addForm.tag = '';
            this.addForm.region = '';
            this.addForm.content = '';
            this.addForm.state = 0;
            this.dialogFormVisible = true;
        },
        handleUpdate(row) {
            this.addForm.id = row.id;
            this.addForm.url = row.url;
            this.addForm.tag = row.tag;
            this.addForm.region = row.region;
            this.addForm.content = row.content;
            this.addForm.state = row.state;
            this.dialogFormVisible = true;
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = new URLSearchParams();
                params.append('id', row.id);
                this.axios.post('/iqy/virtual/delete',params).then((response) => {
                    console.log(response);
                    let result = response.data;
                    this.parseResult(result);
                    this.init();
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                }).catch((error) => {
                    console.log(error);
                    this.$notify.error({
                        title: '错误',
                        message:  error,
                        duration: 0
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let params = new URLSearchParams();
                    params.append('url', this.addForm.url);
                    params.append('id', this.addForm.id);
                    params.append('tag', this.addForm.tag);
                    params.append('region', this.addForm.region);
                    params.append('content', this.addForm.content);
                    this.axios.post('/iqy/virtual/add',params).then((response) => {
                        console.log(response);
                        let result = response.data;
                        this.init();
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.$refs[formName].resetFields();
                        this.dialogFormVisible = false;
                    }).catch((error) => {
                        console.log(error);
                        this.$notify.error({
                            title: '错误',
                            message:  error,
                            duration: 0
                        });
                        this.$refs[formName].resetFields();
                    });
                } else {
                    return false;
                }
            });
        }
    },
    created(){
        this.init();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .demo-block{
    border: 1px solid #ebebeb;
    border-radius: 3px;
    padding: 24px;
    margin-top: 10px;
  }
    .el-input{
        width: 80%;
    }
  .el-dialog__body{
    padding: 0px 20px;
  }

</style>
